.navbarModule {
    height: 60px;
    width: 100%;
    position: fixed;
    background: $black-opacity;
    top: 0;
    z-index: 999;

    .container {
        height: 60px;

        @include media(text-align, center);

        &, .ng-hide-add {
            -webkit-animation: 1.5s add;
            animation: 1s add;
        }

        &, .ng-hide-remove {
            -webkit-animation: 1.5s remove;
            animation: 1s remove;
        }

        .smallSwitch {
            display: none;
            background: url("../img/slider.svg") no-repeat;
            background-size: 50% 50%;
            background-position: center;
            height: 55px;
            width: 55px;
            float: left;
            cursor: pointer;
            margin-top: -60px;

            @media screen and (max-width: $max_screen) {
                display: inline-block;
                margin-top: -55px;
            }
        }

        .logoWrap {
            display: inline-block;
            height: 60px;
            background: url("../img/logofire.png") 100% 100% no-repeat;
            background-position-x: 0;
            background-position-y: 50%;
            font-size: 22px;
            line-height: 75px;
            text-indent: 30px;
            font-family: 'Tahoma';
            color: $blue;
            cursor: default;

            @media screen and (max-width: $max_screen) {
                display: block;
                width: 160px;
                margin: 0 auto;
            }
        }

        .navbarTitle {
            width: 242px;
            height: 60px;
            margin: 0 auto;
            margin-top: -60px;
            line-height: 60px;
            text-align: center;
            cursor: default;

            @include media(display, none);
        }

        .iconAre {
            display: inline-block;
            height: 60px;
            width: 240px;
            margin-right: 0;
            float: right;
            margin-top: -61px;

            @include media(display, none);

            a {
                display: inline-block;
                width: 55px;
                height: 55px;
                line-height: 60px;
                text-align: center;
                cursor: pointer;
                margin-top: 3px;

                @include media(display, none);
            }

            .filter {
                background: url("../img/filter.svg") no-repeat;
                background-size: 50% 50%;
                background-position: center;

                &:hover {
                    background-image: url("../img/filter_hover.svg");
                }
            }

            .search {
                background: url("../img/search.svg") no-repeat;
                background-size: 50% 50%;
                background-position: center;

                @include btn-can-click;
            }

            .login {
                background: url("../img/user.svg") no-repeat;
                background-size: 50% 50%;
                background-position: center;

                &:hover {
                    border: 1px solid rgba(0, 0, 0, 0);
                }

                @include btn-can-click;
            }

            .popover {
                color: $grey-normal;
                background-color: $white-seven;
                border-radius: 3px;

                .arrow {
                    top: -10px;

                    &:after {
                        border-bottom-color: $white-nine;
                    }
                }

                .popover-title {
                    background-color: $white-five;
                    border-radius: 0;
                    border-bottom: 1px solid #DDDDDD;
                    width: 150px;
                    text-align: center;
                    cursor: default;
                }

                .popover-content {
                    background-color: $white-seven;
                    padding: 4px;

                    ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;

                        .setting {
                            width: 100%;
                            text-align: center;
                            height: 35px;
                            line-height: 35px;
                            cursor: pointer;
                            background: url("../img/setting.png") no-repeat;
                            background-position-x: 10px;
                            background-position-y: 9px;
                            font-weight: 600;

                            &:hover {
                                background-color: #CCCCCC;
                            }
                        }

                        .logout {
                            background: url("../img/logout.png") no-repeat;
                            background-position-x: 12px;
                            background-position-y: 9px;

                            @extend .setting;
                        }
                    }
                }
            }

            .switch {
                padding: 15px;

                &:hover {
                    .line {
                        margin-top: 0;

                        &:first-child {
                            margin-top: 0px;
                            width: 20px;
                            transform: rotate(60deg) translate(11px, 9px);
                        }

                        &:nth-child(2) {
                            transform: rotate(90deg) translate(9px, 0px);
                        }

                        &:last-child {
                            width: 20px;
                            transform: rotate(-60deg) translate(-5px, 11px);
                        }
                    }
                }

                .line {
                    &:first-child {
                        margin-top: 3px;
                    }

                    border: 1px solid $white;
                    margin-top: 6px;
                    transition: width .5s,transform .5s,margin-top .5s;
                }

                @include btn-can-click;
            }
        }
    }

    .subTitle {
        width: 100%;
        text-align: center;
        transition: 1s background-color;
        height: 35px;

        @include media(display, none);

        ul {
            list-style: none;
            padding: 0;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            height: 35px;
            line-height: 37px;

            .isSelect {
                border-bottom: 2px solid;
            }

            li {
                display: inline-block;
                width: 150px;
                height: 30px;
                line-height: 30px;
                padding: 0 10px;
                cursor: pointer;

                @include btn-can-click;

                .subMenu {
                    color: $white;
                    text-decoration: none;

                    @include btn-can-click;
                }
            }
        }
    }

    .allMenuArea {
        width: 100%;
        height: 250px;
        background: $black-deep;
        position: fixed;

        &, .ng-hide-add {
            -webkit-animation: 1s add;
            animation: 1s add;
        }

        &, .ng-hide-remove {
            -webkit-animation: 1s remove;
            animation: 1s remove;
        }

        @include media(height, 100%);

        .container {
            min-height: 250px;

            @include media(height, 100%);

            .subLogo {
                background: url("../img/logofire.png") 100% 100% no-repeat;
                background-position: center;
                height: 55px;
            }

            .closeTool {
                display: inline-block;
                width: 55px;
                height: 55px;
                float: right;
                padding: 10px;
                background: url("../img/close.svg") no-repeat;
                background-size: 50% 50%;
                background-position: center;
                cursor: pointer;
                margin-top: -55px;

                @include media(float, left);

                @include btn-can-click;
            }

            .smallSearch {
                display: none;
                margin-top: -55px;
                height: 55px;
                width: 55px;
                background: url("../img/search.svg") no-repeat;
                background-size: 50% 50%;
                background-position: center;
                float: right;
                cursor: pointer;

                @include btn-can-click;

                @include media(display, block);
            }

            .mainTitleList {
                text-align: center;

                ul {
                    list-style: none;
                    width: 100%;
                    line-height: 38px;
                    padding: 0;
                    margin: 0;

                    & > li {
                        display: inline-block;
                        width: 150px;
                        padding: 0 10px;

                        @media screen and (max-width: $max_screen) {
                            display: block;
                            width: 100%;
                            border: {
                                bottom: 1px solid $white;
                            };
                        }

                        a {
                            font-size: 18px;
                            color: $grey;
                            text-decoration: none;

                            @include btn-can-click;

                            @media screen and (max-width: $max_screen) {
                                display: block;

                                &:hover {
                                    background: rgba(255, 255, 255, 0.1);
                                }
                            }
                        }

                        ol {
                            padding: 0;

                            li {
                                width: 128px;
                                cursor: pointer;
                                display: inline-block;

                                @include media(display, inline-block);

                                a {
                                    color: $white;
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }

            .smallLogin {
                display: none;
                background: url("../img/user.svg") no-repeat;
                background-size: 50% 50%;
                background-position: center;
                height: 50px;
                width: 50px;
                margin: 0 auto;
                cursor: pointer;

                @include btn-can-click;

                @include media(display, block);
            }
        }
    }
}